<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body class="dpflex">
    <!-- 轮播图 -->
    <header>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./imgs/index-swiper-bg1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./imgs/index-swiper-bg2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./imgs/index-swiper-bg3.jpg" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->
            
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
    </header>
    <!-- 内容 -->
    <main class="dpflex flex1">
        <!-- 排名 -->
        <div class="rank mt20">
            <p class="mt16 ml12 fs20">今日排名</p>
            <h2 id="rankNum" class="mr16"></h2>
        </div>
        <!-- 打卡 -->
        <div class="clock mt20">
            <p class="mt16 ml16">
                累计打卡
                <span id="clockNum"></span>
                天
            </p>
            <p id="clockBtn" class="clock-punch">今日打卡</p>
        </div>
        <!-- 运动数据 -->
        <div class="sport-data mt20">
            <p class="mt16 ml12 fs18">运动数据</p>
        </div>
        <!-- 运动徽章 -->
        <div class="sports-badge mt20">
            <p class="mt16 ml12 fs18">累积运动徽章</p>
            <h3 class="mr16">
                <span id="sportNum"></span>
                枚
            </h3>
        </div>
        <!-- 课程训练 -->
        <div class="course mt20">
            <p class="mt16 ml12 fs18">课程训练</p>
        </div>
        <!-- 户外跑步 -->
        <div class="outdoors mt20">
            <p class="mt16 ml12 fs18">户外跑步</p>
        </div>
    </main>
    <!-- 页脚 -->
    <footer class="dpflex">
        <!-- <div class="dpflex">
            <span class="icon iconfont icon-home"></span>
            <p>首页</p>
        </div>
        <div class="dpflex">
            <span class="icon iconfont icon-sport"></span>
            <p>运动</p>
        </div>
        <div class="dpflex">
            <span class="icon iconfont icon-mine"></span>
            <p>我的</p>
        </div> -->
    </footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

</body>
</html>